<template>
  <div id="uCenter" class="bg-fa of">
    <el-tabs id="ucenter_tabs" tab-position="left">
      <el-tab-pane label="个人信息">
          <el-form :model="user" label-width="100px">

            <el-form-item label="编号：" >
              <span>{{user.id}}</span>
            </el-form-item>

            <el-form-item label="手机号：">
              <span>{{user.mobile}}</span>
            </el-form-item>

            <el-form-item label="加密后密码：">
              <span>{{user.password}}</span>
            </el-form-item>

            <el-form-item label="真实姓名：">
              <span>{{user.nickname}}</span>
            </el-form-item>

            <el-form-item label="头像">
              <el-avatar :size="50" :src="user.avatar"></el-avatar>
            </el-form-item>

            <el-form-item label="性别：" v-if="user.sex == 1">
              <span style="color:blue;">男</span>
            </el-form-item>
            <el-form-item label="性别：" v-else>
              <span style="color:pink;">女</span>
            </el-form-item>

            <el-form-item label="年龄：">
              <span>{{user.age}}</span>
            </el-form-item>

            <el-form-item label="是否被禁用：" v-if="user.isDisabled == 0">
              <span style="color:green;">未被禁用</span>
            </el-form-item>
            <el-form-item label="是否被禁用：" v-else>
              <span style="color:red;">已被禁用</span>
            </el-form-item>

            <el-form-item label="是否被删除：" v-if="user.isDeleted == 0">
              <span style="color:green;">未被删除</span>
            </el-form-item>
            <el-form-item label="是否被删除：" v-else>
              <span style="color:red;">已被删除</span>
            </el-form-item>

            <el-form-item label="注册时间：">
              <span>{{user.gmtCreate}}</span>
            </el-form-item>

          </el-form>

      </el-tab-pane>

<!-- --------------------------------------------------------------------------------------- -->

      <el-tab-pane label="已买课程">

        <div v-for="order in orders" :key="order.courseId" style="float:left;width:30%;margin:15px 10px;">
          <a :href="'/course/'+order.courseId">
            <el-image
              class="order_image"
              :src="order.courseCover"
              fit="contain"></el-image>
            <h2 align="center">{{order.courseTitle}}，共支付{{order.totalFee}}元</h2>
          </a>
        </div>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import ucenter from '@/api/ucenter'
import profile from '@/pages/ucenter/profile'
export default {
  data() {
    return {
      user:{},
      orders:{}
    }
  },
  components: {
      profile
  },
  created() {
    this.getUserInfo()
  },
  mounted(){
    this.getOrdersByUserId()     
  },
  methods:{
    getUserInfo(){
      ucenter.getUserInfo()
        .then(response => {
          this.user = response.data.data.user
        })
    },
    getOrdersByUserId(){
      ucenter.getOrdersByUserId()
        .then(response => {
          this.orders = response.data.data.orders
        })
    }
  },
  components:{
    
  }
};
</script>
<style scoped>
  #uCenter{
    width:50%;
    margin: 0 auto;
  }
  #ucenter_tabs{
    height:100%;
  }
  .order_image{
    width: 100%;
  }
  .order_image:hover{
    opacity: 0.4;
  }
</style>